import { useState } from 'react'

function App() {
  // 场景：当你想在函数组件中使用数据时，可以使用 useState Hook
  // 作用：为函数组件提供状态

  // 参数：useState 参数是初始值，可以是任意值
  // 返回：返回的是一个数组
  //      数组包含两个值：当前状态 以及 更改状态的方法

  // 此处使用了数组解构语法，相当于创建了两个变量(可以是任意值)
  // 但是我们一般约定函数的名称以 Set 开头，后面跟上状态的名称
  const [count, setCount] = useState(0)

  const updateCount = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <h4>根组件</h4>
      <p>{count}</p>
      <button onClick={updateCount}>更新 count</button>
    </div>
  )
}

export default App
